<template>
	<view class="content">
		<view class="out">
			<view class="tag">
				<u-tag :text="type" plain shape="circle" color="#1ba784" borderColor="#1ba784"></u-tag>
			</view>
			<view class="input">
				<u--input :placeholder="placeHolder" border="surround" :maxlength="maxLength" :type="inputType"
					v-model="value" @change="change"></u--input>
			</view>
			<view class="button">
				<u-button type="primary" shape="circle" text="确认修改" color="#1ba784" @click.native="update()"></u-button>
			</view>
			<!-- 消息提示框 -->
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: "修改",
				placeHolder: "昵称长度不超过6位",
				//输入框长度限制
				maxLength: 6,
				//输入框类型
				inputType: "text",
				//消息提示框参数
				ToastParams: {
					type: "success",
					message: "修改成功",
					position: "top"
				}
			};
		},
		onLoad(e) {
			console.log(e);
			this.type = e.type;
			if (this.type === "手机号") {
				this.maxLength = 11;
				this.inputType = "number";
				this.placeHolder = `${this.type}的长度为11位`
			}
			this.value = e.value;
		},
		methods: {
			//消息提示框
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			//昵称检验
			checkName(value) {
				if (value.length === 0) {
					this.ToastParams.type = "error";
					this.ToastParams.message = "昵称不能为空";
					this.showToast(this.ToastParams);
					return false;
				}
				this.ToastParams.type = "success";
				this.ToastParams.message = "昵称修改成功";
				this.showToast(this.ToastParams);
				return true;
			},
			//手机号正则检验
			checkPhone(value) {
				let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (value.length === 11) {
					//长度为11处理
					if (!reg.test(value)) {
						//手机号不符合规范
						this.ToastParams.type = "error";
						this.ToastParams.message = "手机号第一位必须1,第二位为3,4,5,7,8"
						//将input清空
						this.value = "";
						this.showToast(this.ToastParams);
						return false;
					} else {
						this.ToastParams.type = "success";
						this.ToastParams.message = "手机号修改成功";
						this.showToast(this.ToastParams);
						return true;
					}
				}
				//长度不为11处理
				this.ToastParams.message = "手机号长度不满足11位";
				this.ToastParams.type = "error";
				//将input清空
				this.value = "";
				this.showToast(this.ToastParams);
				return false;
			},
			change() {},
			gotoPersonInfo(type) {
				uni.$emit(type, this.value)
				uni.navigateTo({
					url: "/pages/PersonalInformation/PersonalInformation"
				})
			},
			update() {
				if (this.type === "姓名") {
					if (this.checkName(this.value)) {
						this.gotoPersonInfo("updateName")
					}
				} else if (this.type === "手机号") {
					if (this.checkPhone(this.value)) {
						this.gotoPersonInfo("updatePhone")
					}
				} else {
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.out {
			margin-top: 40rpx;
			padding: 0rpx 15rpx;

			.tag {
				width: 20%;
			}

			.input {
				margin-top: 2%;
			}

			.button {
				margin-top: 4%;
			}
		}
	}
</style>